<template>
  <div class="third_panel_module">
    <el-table
      ref="table"
      :data="thirdFormatedChannelData"
      size="mini"
      border
      height="100%"
      style="width: 100%"
      :span-method="computedSpanMethod"
      :cell-style="computeCellStyle"
    >
      <el-table-column
        v-for="(column, key) in thirdChannelDict"
        :key="key"
        :prop="key"
        :label="column"
      >
        <template v-if="key !== 'channel'" v-slot="scope">
          <el-input
            size="mini"
            v-model="thirdFormatedChannelData[scope.$index][key]"
            placeholder="请输入"
            :disabled="disabled"
            @blur="onInputChange(key, scope.$index)"
          />
        </template>
        <template v-if="key === 'Measured_sound_path'" #header>
          <div class="model-header">
            <span>测量声程【mm】</span>
            <el-button
              type="primary"
              size="mini"
              :disabled="disabled || !limits.AAC_1"
              @click="computeByFormula"
            >
              计算结果
            </el-button>
          </div>
        </template>
        <template v-if="key === 'Length_of_Ends'" slot="header">
          <div class="model-header">
            <span>两端总长【mm】</span>
            <el-button
              type="primary"
              size="mini"
              :disabled="disabled || !limits.AAC_2"
              @click="computeByFormula_2"
            >
              计算两端总长
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Getter } from 'vuex-class'
import { Component, Prop, Ref, Watch } from 'vue-property-decorator'
import { thirdChannelDict, thirdChannelTableData } from '../utils/params'
import { FormatChannelData, FillInChannelData, CaptureChannelData } from '@/utils/precedure'
import { AAC_ComputeByFormula, AAC_2_ComputeByFormula } from '@/api/procedure'
import { AxiosResponse } from 'axios'
import { Dictionary } from '@/interface/Basic'
import { deepClone } from '@/utils/specificFunc'
@Component
class ThirdPanel extends Vue {
  @Getter('theme') theme!: 'dark' | 'light'
  @Ref() table!: { doLayout: () => void }
  @Prop({ required: true }) records!: Dictionary<string>
  @Prop({ default: true }) disabled!: boolean
  @Prop({ required: true }) limits!: Dictionary<boolean>
  meter: string = ''
  thirdChannelDict = thirdChannelDict
  thirdChannelTableData = thirdChannelTableData
  thirdFormatedChannelData: Dictionary<string>[] = []
  markedSettings: Dictionary<string[]> = {
    isWarning_1: [],
    isWarning_2: []
  }
  @Watch('records', { deep: true })
  records_handler(newVal: Dictionary<string>) {
    this.thirdFormatedChannelData = FormatChannelData(
      FillInChannelData(this.thirdChannelTableData, newVal),
      Object.keys(this.thirdChannelDict)
    )
  }
  mounted() {
    this.meter = this.$route.params.meterid
    this.thirdFormatedChannelData = FormatChannelData(
      this.thirdChannelTableData,
      Object.keys(this.thirdChannelDict)
    )
  }
  computedSpanMethod({ column, rowIndex }: any) {
    if (!['channel', 'AAC101', 'AAC201'].includes(column.property)) {
      if (rowIndex % 2 === 0) {
        return {
          rowspan: 2,
          colspan: 1
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    }
  }
  computeCellStyle(e: { rowIndex: number; column: any }) {
    const { rowIndex, column } = e
    const _keys = Object.keys(this.thirdChannelTableData[rowIndex])
    const { isWarning_1, isWarning_2 } = this.markedSettings
    if (
      isWarning_2.includes(_keys[_keys.length - 1]) &&
      column.property === 'Measured_sound_path'
    ) {
      return {
        backgroundColor: this.theme === 'dark' ? '#FCDC33' : '#FCDF2D'
      }
    } else if (
      isWarning_1.includes(_keys[_keys.length - 2]) &&
      column.property === 'Length_of_Ends'
    ) {
      return {
        backgroundColor: this.theme === 'dark' ? '#FCDC33' : '#FCDF2D'
      }
    }
  }
  onInputChange(key: string | number, index: number) {
    key = key.toString()
    if (!['channel', 'AAC101', 'AAC201'].includes(key)) {
      this.thirdFormatedChannelData[index % 2 === 0 ? index + 1 : index - 1][key] =
        this.thirdFormatedChannelData[index][key]
    }
  }
  CaptureTotalParams() {
    const copiedRecords = deepClone(this.records)
    // thirdFormatedChannelData
    const captureResult = {
      ...CaptureChannelData(this.thirdFormatedChannelData, this.thirdChannelTableData)
    }
    Object.keys(captureResult).forEach(key => {
      if (key !== 'static') {
        copiedRecords[key] = captureResult[key]
      }
    })
    return copiedRecords
  }
  computeByFormula() {
    AAC_ComputeByFormula(this.CaptureTotalParams()).then(
      (res: AxiosResponse<{ ReturnData: { result: Dictionary<string>; Nocount: string[] } }>) => {
        const { result, Nocount } = res.data.ReturnData
        this.markedSettings.isWarning_2 = Nocount
        this.thirdFormatedChannelData = FormatChannelData(
          FillInChannelData(this.thirdChannelTableData, result),
          Object.keys(this.thirdChannelDict)
        )
      }
    )
  }
  computeByFormula_2() {
    AAC_2_ComputeByFormula(this.CaptureTotalParams()).then(
      (res: AxiosResponse<{ ReturnData: { result: Dictionary<string>; Nocount: string[] } }>) => {
        const { result, Nocount } = res.data.ReturnData
        this.markedSettings.isWarning_1 = Nocount
        this.thirdFormatedChannelData = FormatChannelData(
          FillInChannelData(this.thirdChannelTableData, result),
          Object.keys(this.thirdChannelDict)
        )
      }
    )
  }
}
export default ThirdPanel
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.third_panel_module {
  height: 100%;
  #flex(row, flex-start, space-between);
  .el-table {
    flex: 1;
    .model-header {
      #flex(row, center, space-between);
    }
  }
}
</style>
